<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  
  <title>使用 Hexo 搭建博客 | 王圣龙的个人博客</title>

  
  <meta name="author" content="王圣龙">
  

  
  <meta name="description" content="前期准备安装Git因为 Hexo 的源代码还有主题都放在开源网站 Github 上，所以在搭建博客的过程中，我们会经常和它打交道。因此，安装一下 Git 会让我们轻松一些。我们可以在它的官网下载, 然后安装。

安装NodeHexo 博客本身就是基于 Node.js 开发，所以如果没有安装 Node">
  

  
  
  <meta name="keywords" content="Hexo">
  

  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta property="og:title" content="使用 Hexo 搭建博客"/>

  <meta property="og:site_name" content="王圣龙的个人博客"/>

  
  <meta property="og:image" content="/favicon.ico"/>
  

  <link href="/favicon.ico" rel="icon">
  <link rel="alternate" href="/atom.xml" title="王圣龙的个人博客" type="application/atom+xml">
  <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="blog">
  <div class="content">

    <header>
  <div class="site-branding">
    <h1 class="site-title">
      <a href="/">王圣龙的个人博客</a>
    </h1>
    <p class="site-description"></p>
  </div>
  <nav class="site-navigation">
    <ul>
      
    </ul>
  </nav>
</header>

    <main class="site-main posts-loop">
    <article>

  
    
    <h3 class="article-title"><span>使用 Hexo 搭建博客</span></h3>
    
  

  <div class="article-top-meta">
    <span class="posted-on">
      <a href="/2021/03/09/build-blog-using-hexo/" rel="bookmark">
        <time class="entry-date published" datetime="2021-03-09T11:43:23.000Z">
          2021-03-09
        </time>
      </a>
    </span>
  </div>


  

  <div class="article-content">
    <div class="entry">
      
        <h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><h3 id="安装Git"><a href="#安装Git" class="headerlink" title="安装Git"></a>安装Git</h3><p>因为 Hexo 的源代码还有主题都放在开源网站 Github 上，所以在搭建博客的过程中，我们会经常和它打交道。因此，安装一下 Git 会让我们轻松一些。我们可以在它的<a target="_blank" rel="noopener" href="https://git-scm.com/">官网下载</a>, 然后安装。</p>
<p><a target="_blank" rel="noopener" href="https://imgtu.com/i/658N24"><img src="https://z3.ax1x.com/2021/03/21/658N24.png" alt="658N24.png"></a></p>
<h3 id="安装Node"><a href="#安装Node" class="headerlink" title="安装Node"></a>安装Node</h3><p>Hexo 博客本身就是基于 Node.js 开发，所以如果没有安装 Node.js ，Hexo 根本无法运行。你可以去<a target="_blank" rel="noopener" href="https://nodejs.org/en/">官网下载</a>。安装完成后，你可以打开命令行窗口，输入以下命令来检查 Node.js 是否安装成功</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://imgtu.com/i/6580q1"><img src="https://z3.ax1x.com/2021/03/21/6580q1.png" alt="6580q1.png"></a></p>
<h2 id="开始安装Hexo"><a href="#开始安装Hexo" class="headerlink" title="开始安装Hexo"></a>开始安装Hexo</h2><p>首先，我们可以准备一个文件夹，专门用来存放和博客相关的内容，后面安装 Hexo, 以及写博客都在这个文件夹内</p>
<p>使用 npm(安装了Node.js后，就有npm了) 命令安装 Hexo</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>
<p>hexo-cli 是 Hexo 的命令行工具，可以用它来配置 Hexo</p>
<p>接下来，我们使用它来初始化 Hexo</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init</span><br></pre></td></tr></table></figure>
<p>执行这条命令后，就会在该文件夹下生成一系列内容（不一定和这个完全一样）</p>
<p><a target="_blank" rel="noopener" href="https://imgtu.com/i/658IdP"><img src="https://z3.ax1x.com/2021/03/21/658IdP.png" alt="658IdP.png"></a></p>
<p>然后，依次执行下面这两条命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure>
<p><a target="_blank" rel="noopener" href="https://imgtu.com/i/65cuD0"><img src="https://z3.ax1x.com/2021/03/21/65cuD0.png" alt="65cuD0.png"></a></p>
<p><a target="_blank" rel="noopener" href="https://imgtu.com/i/65cha8"><img src="https://z3.ax1x.com/2021/03/21/65cha8.png" alt="65cha8.png"></a></p>
<p>打开浏览器，在地址栏输入 <code>localhost:4000</code>, 就可以看到运行效果了 (每个人的主题可能都不一样，这个后期是可以换的)</p>
<p><a target="_blank" rel="noopener" href="https://imgtu.com/i/65cB5D"><img src="https://z3.ax1x.com/2021/03/21/65cB5D.png" alt="65cB5D.png"></a></p>

      
    </div>

  </div>

  <div class="article-footer">
    <div class="article-meta pull-left">

    

    
    

    <span class="post-tags">
      <i class="icon-tags"></i>
        <a href="/tags/Hexo/">Hexo</a>
    </span>
    

    </div>

    
  </div>
</article>

  






    </main>

    <footer class="site-footer">
  <p class="site-info">
    Proudly powered by <a href="https://hexo.io/" target="_blank">Hexo</a> and
    Theme by <a href="https://github.com/CodeDaraW/Hacker" target="_blank">Hacker</a>
    </br>
    
    &copy; 2021 王圣龙
    
  </p>
</footer>
    
    
  </div>
</div>
</body>
</html>